<template>
  <div>
    <k-search show-export @export="onExport">
      <el-input placeholder="输入学员姓名、手机号搜索"
                size="small"
                v-model="search.key"
                @keyup.enter.native="onClickSearch"
                style="width: 400px"/>

      <k-search-box label="性别">
        <el-select size="small" v-model="search.status" style="width: 100px">
          <el-option :value="0" label="未处理"/>
          <el-option :value="1" label="已处理"/>
        </el-select>
      </k-search-box>

      <k-search-box>
        <el-button type="info" size="small"
                   @click="onClickSearch"
                   icon="el-icon-search">搜索</el-button>
      </k-search-box>
    </k-search>

    <div class="ke__padding ke__bgfff">
      <el-table :data="list" v-loading="loading" size="small">

        <el-table-column prop="module.name" label="课程名称"/>

        <el-table-column prop="realname" label="学员姓名"/>

        <el-table-column prop="sex" label="性别" width="60"/>

        <el-table-column prop="phone" label="手机号"/>

        <el-table-column prop="money" label="费用"/>

        <el-table-column prop="pay_money" label="已缴费用"/>

        <el-table-column prop="create_time" label="报名时间" width="120"/>

        <el-table-column label="操作" width="260" align="center">
          <template slot-scope="{ row, $index }">
            <el-button size="small"
                       type="text"
                       :disabled="row.money - row.pay_money === 0"
                       @click="onClickPay(row, $index)"
            >缴费</el-button>

          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="page" :total="total" @current-change="onPageChange"/>
    </div>

    <index-pay ref="dialogPay" v-model="visiblePayDialog"/>
  </div>
</template>

<script>
  import { Vue, Component } from 'vue-property-decorator'
  import KSearch from '@/components/KSearch'
  import IndexPay from '@/views/student/index-pay'
  @Component ({
    components: { IndexPay, KSearch }
  })
  export default class StudentIndex extends Vue {
    list = []
    total = 0
    page = 1
    limit = 10
    selection = []
    loading = true
    search= {}
    visiblePayDialog = false


    mounted () {
      this.onLoad()
    }

    onClickSearch () {
      this.page = 1
      this.list = []
      this.onLoad()
    }

    onPageChange (page) {
      this.list = []
      this.page = page
      this.onLoad()
    }

    // 加载列表数据
    onLoad () {
      this.loading = true
      this.$http.get('admin/student', { page: this.page, limit: this.limit, ...this.search })
        .finally(() => this.loading = false)
        .then(result => {
          this.list = result.list.map(item => {
            if (item.create_time) {
              item.create_time = item.create_time.split(' ')[0]
            } else {
              item.create_time = '未知'
            }
            item.sex = item.sex ? '男' : '女'
            return item
          })
          this.total = result.total
        })
    }

    // 表格选择项被改变
    onSelectionChange (data) {
      this.selection = data.map(item => {
        return item.id
      })
    }


    // 导出表格
    onExport () {
      this.$http.post('admin/export/student')
        .then(result => {
          if (result.res_code === 0) {
            this.$message.success('导出成功')
            setTimeout(() => {
              this.$router.push({ name: 'export' })
            }, 500)
          } else {
            this.$message.error(result.res_msg)
          }
        })
    }

    /**
     * 支付
     * @param row
     * @param idx
     */
    onClickPay (row, idx) {
      if (row.pay_money >= row.money) {
        this.$alert('无需缴纳')
        return
      }
      this.$refs.dialogPay.form = { ...row }
      this.$refs.dialogPay.callback = (data) => {
        this.list.splice(idx, 1, { ...data })
      }
      this.visiblePayDialog = true
    }

    // 删除
    onClickDelete (row) {
      this.$confirm('确定要删除这个课程吗？')
        .then(() => {
          const idx = this.list.findIndex(item => item.id === row.id)
          this.list.splice(idx, 1)
          this.$http.delete(`admin/edu/${row.id}`)
            .then((result) => {
              if (result.res_code === 0) {
                this.$message.success('删除成功')
                if (this.list.length <= 3) {
                  this.list = []
                  this.total = 0
                  this.onLoad()
                }
              } else {
                this.onLoad()
              }
            })
        })
    }

  }
</script>

<style scoped>

</style>
